<template>
  <div>
    <div class="v-input__control">
      <div class="v-input__slot">
        <treeselect
          ref="treeSelect"
          v-model="parentId"
          :multiple="false"
          :options="treeItems"
          :normalizer="treeNormalizer"
          placeholder="请选择..."
          @input="validTreeSelect(parentId)"
          @close="validTreeSelect(parentId)"
        />
      </div>
      <div class="v-text-field__details" style="padding-left: 12px">
        <div class="v-messages theme--light error--text" role="alert">
          <div class="v-messages__wrapper">
            <div class="v-messages__message" v-show="showMessage">
              该项为必填项！
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.vue-treeselect__control {
  border: solid 1px rgb(118, 118, 118) !important;
  height: 40px !important;
}

.vue-treeselect__control_active {
  border: solid 2px #ff5252 !important;
  height: 40px !important;
}

.vue-treeselect__placeholder,
.vue-treeselect__single-value {
  line-height: 40px !important;
}
</style>

<script>
// import the component
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "MaterialTreeSelect", // 适配 Material 的 TreeSelect
  components: {
    Treeselect,
  },
  props: {
    value: {
      type: Array | Number | String,
      default: [] | 0 | "",
    },
    options: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      parentId: this.value,
      treeItems: this.options,
      // 自定义树形组件数据结构
      treeNormalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        };
      },
      showMessage: false,
    };
  },
  watch: {
    value(newValue) {
      // v-modle绑定的值设为null，必须是null，不能是‘null’，初始化的时候才不会出现unknown。
      this.parentId =
        newValue == 0 || newValue == "" || newValue == undefined
          ? null
          : newValue;
    },
    parentId(newValue) {
      this.$emit("input", newValue);
    },
  },
  methods: {
    /**
     * 验证树形组件
     */
    validTreeSelect(val) {
      var treeselectEle = this.$refs.treeSelect.$children[0].$el;
      var className = "vue-treeselect__control";
      var activeClassName = className + " vue-treeselect__control_active";
      if (val == null || val == undefined) {
        this.showMessage = true;
        if (treeselectEle.className === className) {
          treeselectEle.className = activeClassName;
        }
        return false;
      } else {
        this.showMessage = false;
        if (treeselectEle.className === activeClassName) {
          treeselectEle.className = className;
        }
        return true;
      }
    },
  },
};
</script>
